import { useDispatch, useSelector } from 'react-redux';

import wrapper from '@/store/store';
import type { StoreDispatch, StoreState } from '@/store/store';
import { decrement, fetchGetShowVerification, increment } from '@/store/module/test';

import { Button, Input } from 'antd';

export const getServerSideProps = wrapper.getServerSideProps((store) => {
	return async (ctx) => {
		await store.dispatch(fetchGetShowVerification({ channel: 'xubei' }));
		return {
			props: {}
		};
	};
});

export default function Test() {
	const { num, showVerification } = useSelector((state: StoreState) => state.test);

	const dispatch: StoreDispatch = useDispatch();

	function onIncrement() {
		dispatch(increment(1));
	}

	function onDecrement() {
		dispatch(decrement(1));
	}

	return (
		<>
			<div>hello test</div>
			<div>
				<Button onClick={onDecrement}>-1</Button>

				<div>{num}</div>
				<div>{showVerification}</div>
				<Button onClick={onIncrement}>+1</Button>

                {/* <Input /> */}
			</div>
		</>
	);
}
